/*
 * index.css
 */

/**********************************************
                Plugins
**********************************************/

/*----------------------------------------------
                DATA TABLES
----------------------------------------------*/

table.dataTable {
    margin: 0 auto;
}

table.dataTable thead tr {
    background-color: #000000;
    color: #FFFFFF;
}

table.dataTable thead tr th, table.dataTable tbody tr td {
    padding: 2px 6px;
}

table.dataTable tbody tr:last-child td {
    border-bottom: 1px solid #000000;
}

table.dataTable tbody tr td.dataTables_empty {
    background-color: #FFF;
    color: #000;
}

table.dataTable tfoot input {
    color: #999;
    border: 1px solid #999;
    margin: 5px;
}

.dt_pag_wrapper {
    display: inline-block;
}

.dt_pag_wrapper > * {
    margin: 5px auto;
}

div.dataTables_paginate {
    float: right;
}

div.dataTables_paginate,
div.dataTables_info {
    padding: 6px;
}

a.paginate_button,
a.paginate_active {
    display: inline-block;
    background-color: #C9FFFC;
    padding: 2px 6px;
    margin-left: 2px;
    cursor: pointer;
    border: 1px solid #999;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 4px;
}

a.paginate_active {
    background-color: transparent;
}

a.paginate_button_disabled {
    color: #999;
}
.paging_full_numbers a:active {
    outline: none
}
.paging_full_numbers a:hover {
    text-decoration: none;
}

/**********************************************
                        Elementos particulares
 **********************************************/

/*----------------------------------------------
                        MENUS
 ----------------------------------------------*/

/*----------------------------------------------
                        MENUS > MI BUS ANDANDO
 ----------------------------------------------*/

#mibusandando_menu {
    font-family: "Benjamin Gothic", "Arial", "sans-serif";
    text-align: center;
    width: 200px;
    background-color: red;

    position: absolute;
    top: 95px;
    left: 119px;
}

#mibusandando_menu > * {
    padding: 6px 0;
}

#mibusandando_menu .text {
    margin-right: 10px;
}

#mibusandando_menu #haciaeia_filter {
    color: #000;
    background-color: #FAEC21;
}

#mibusandando_menu #desdeeia_filter {
    color: #FFF;
    background-color: #285999;
}

#mibusandando_menu #haciaeia_filter.active, #mibusandando_menu #desdeeia_filter.active {
    -webkit-box-shadow: inset 0px 0px 18px 0.05px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: inset 0px 0px 18px 0.05px rgba(0, 0, 0, 0.75);
    box-shadow: inset 0px 0px 18px 0.05px rgba(0, 0, 0, 0.75);
}

#mibusandando_menu #haciaeia_filter.active:before, #mibusandando_menu #desdeeia_filter.active:before {
    content: "<< ";
}

#mibusandando_menu #haciaeia_filter.active:after, #mibusandando_menu #desdeeia_filter.active:after {
    content: " >>";
}

#mibusandando_menu #haciaeia_filter.active *, #mibusandando_menu #desdeeia_filter.active * {
    text-decoration: underline;
    font-style: italic;
}

/*----------------------------------------------
                        MENUS > PLANEO MI VIAJE
 ----------------------------------------------*/

#planeomiviaje_menu {
    position: absolute;
    top: 95px;
    color: #FFFFFF;
    background-color: #000000;
    min-width: inherit;
}

#planeomiviaje_menu * {
    font-family: "Arial Rounded", "Arial", "sans-serif";
    text-transform: uppercase;
}

#planeomiviaje_menu > div {
    margin: 2px 2px;
}

#planeomiviaje_menu #steps_bar {
    text-align: left;
}

#planeomiviaje_menu #steps_bar > div {
    padding: 10px 15px;
    font-weight: bold;
    cursor: default;
}

#planeomiviaje_menu #steps_bar > div.active {
    background-color: #97FFFC;
    color: black;
}

#planeomiviaje_menu #steps_content h3 {
    font-weight: normal;
}

#planeomiviaje_menu #steps_content > div {
    display: none;
}

#planeomiviaje_menu #steps_content > div.active {
    display: block;
}

#planeomiviaje_menu #steps_content .header {
    background-color: #727171;
    text-align: center;
    padding: 5px 20px;
}

#planeomiviaje_menu #steps_content .content {
    background-color: #FFFFFF;
    text-align: center;
    padding: 8px;
    color: #000000;
    max-width: 500px;
}

#planeomiviaje_menu #steps_content .footer {
    text-align: left;
    padding: 5px;
}

#steps_content .footer > div {
    display: inline-block;
    width: 100px;
}

#steps_content .content div.error-message {
    border: 2px solid black;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    text-align: center;
    background-color: #F7706C;
    display: none;
}

#steps_content .content table {
    width: 100% !important;
}

#steps_content .content table tbody tr.selected td {
    background-color: #727171;
}

#steps_content .content div.button_wrapper {
    text-align: right;
}

#steps_content .content input[type=button] {
    background: #000;
    color: #FFF;
    padding: 5px 8px;
    cursor: pointer;
}

#steps_content #origen_viaje .content {
    padding: 0;
    height: 125px;
}

#steps_content #origen_viaje .content > div {
    display: inline-block;
    width: 50%;
    height: 100%;
    min-width: 177px;
}

#steps_content #origen_viaje .content #desdeeia {
    background-color: #285999;
}

#steps_content #origen_viaje .content #desdeparada {
    background-color: #FAEC21;
    text-transform: uppercase;
}

#origen_viaje .content #desdeparada span.text{
    width: 130px;
    font-size: 2em;
    font-weight: bold;
}

div.volver {
    cursor: pointer;
}

#origen_paradas table.dataTable tbody td {
    background-color: #FAEC21;
    cursor: pointer;
}

#origen_paradas table.dataTable tbody tr:hover:not(.selected) td {
    background-color: #FDF9B7;
}

#destino_paradas table.dataTable tbody td {
    background-color: #0060A1;
    color: #FFF;
    cursor: pointer;
}

#destino_paradas table.dataTable tbody tr:hover:not(.selected) td {
    background-color: #089BFF;
}

#fecha .content .ui-datepicker-inline {
    margin: 0 auto;
}

#steps_content #resumen_viaje .content {
    padding: 20px;
    width: auto;
}

#resumen_viaje .content form label {
    min-width: 100px;
}

#resumen_viaje .content form label:after {
    content: ": ";
}

#resumen_viaje .content form input#ReservaTerminos, #mapapopups_menu .parada #terminos {
    min-width: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

#resumen_viaje label[for='ReservaTerminos']:after {
    content: '' !important;
}

a.terminosLink {
    color: #0060A1;
    text-decoration: underline;
}

#resumen_viaje .content form div.input {
    text-align: left;
}

#resumen_viaje .content form input:not([disabled]), #resumen_viaje .content form input[disabled] {
    background-color: transparent;
    text-transform: none;
    min-width: 200px;
    color: #777;
}

#resumen_viaje .content form input[type=submit] {
    background: #000;
    color: #FFF;
    padding: 5px 8px;
    cursor: pointer;
    margin-top: 10px;
    text-transform: uppercase;
}

#resumen_viaje .content form input[type=submit][disabled] {
    cursor: default;
    background-color: #ABABBA;
}

/*----------------------------------------------
                        MENUS > MIS RESERVAS
 ----------------------------------------------*/

#misreservas_menu {
    width: auto;
    background-color: #000;
    color: #FFF;
    border: 2px solid #000;

    position: absolute;
    top: 95px;
    right: 0px;
}

#misreservas_menu .header {
    padding: 10px 20px;
}

#misreservas_menu .content {
    background-color: #FFF;
    color: #000;
    padding: 10px 15px;
}

#misreservas_menu .content div:not(:first-child) {
    margin-top: 6px;
}

#misreservas_menu .content table {
    width: 100%;
}

#misreservas_menu .content table td.no_reservas{
    color: #000000;
    text-align: center;
    border: 1px solid #000000;
}

#misreservas_menu .content tr {
    text-transform: uppercase;
    color: #FFF;
}

#misreservas_menu .content tr td {
    text-transform: uppercase;
    color: #FFF;
    padding: 1px 4px;
}

#misreservas_menu .content th {
    background-color: #000;
    padding: 0 5px;
}

#misreservas_menu .content #reservas_programadas tr:nth-child(even) {
    background-color: #757575;
}

#misreservas_menu .content #reservas_programadas tr:nth-child(odd) {
    background-color: #999999;
}

#misreservas_menu .content #reservas_historial tr.haciaeia td{
    background-color: #FAEC21;
    color: #000;
}

#misreservas_menu .content #reservas_historial tr.desdeeia td{
    background-color: #0060A1;
}

#misreservas_menu .content #reservas_historial tr.cancelada td{
    background-color: #EE9395;
    color: #000;
}

#reservas_programadas th:first-of-type, #reservas_programadas td:first-of-type {
    text-align: center;
}

#misreservas_menu .ui-icon {
    display: inline-block;
    margin: 0 4px;
}

#misreservas_menu .footer {
    width: 100%;
    text-align: center;
}

#misreservas_menu .footer div {
    display: inline-block;
    width: auto;
    font-size: 1.12em;
    padding: 10px 15px;
    text-transform: capitalize;
}

#misreservas_menu .footer span {
    margin-left: 5px;
    margin-right: 5px;
}

/*----------------------------------------------
                        MENUS > MAPAPOPUPS
 ----------------------------------------------*/

/*----------------------------------------------
        MENUS > MAPAPOPUPS > POPUP DE RUTAS FILTER
 ----------------------------------------------*/

#rutasFilter_menu {
    width: auto;
    border: 2px solid black;
    background-color: #FFF;
    color: #000;
    font-family: 'pt_sansregular', 'Arial', 'sans-serif' !important;

    position: absolute;
    top: 137px;
    left: 10px;
}

#rutasFilter_menu > div {
    padding: 5px;
}

#rutasFilter_menu > div:first-of-type {
    border-bottom: 1px solid #aaa;
}

#rutasFilter_menu fieldset {
    border: 2px groove #aaa;
    padding: 5px;
}

#rutasFilter_menu legend {
    font-weight: bold;
    padding: 0 5px;
}

#rutasFilter_menu input[type=checkbox] {
    margin-right: 3px;
}

/*----------------------------------------------
                       POPUPS DE MARCADORES
----------------------------------------------*/

#mapapopups_menu {
    width: auto;
    border: 2px solid black;
    background-color: white;
    color: black;
    font-family: 'pt_sansregular', 'Arial', 'sans-serif' !important;
    font-size: 1.2em !important;

    position: absolute;
    top: 95px;
    right: 0px;
}

#mapapopups_menu .content {
    padding: 0;
}

/*----------------------------------------------
       MENUS > MAPAPOPUPS > POPUP DE RECORRIDO Y DE PARADA
----------------------------------------------*/

.recorrido > div, .parada > div {
    width: auto;
    margin: 3px auto;
    padding: 0 10px;
    font-weight: 500;
    text-transform: uppercase;
    font-weight: bold;
}

.recorrido > div:first-child, .parada > div {
    margin-top: 0;
}

.recorrido div.ruta,
.recorrido div.estado,
.parada div.nombre_parada,
.parada div.title_rutas {
    padding-right: 4px;
    margin-right: 70px;
}

.recorrido div.bus_estado, .parada div.parada_img {
    position: absolute;
    right: 1.8em;
    top: 0.3em;
    background-color: transparent;
    padding: 0;
    margin: 0;
}

.recorrido span.recorrido_text, .parada span.parada_text {
    display: inline-block;
    text-transform: none;
    font-weight: normal;
}

.recorrido span.recorrido_text:first-letter, .parada span.parada_text:first-letter {
    text-transform: uppercase;
}

.recorrido div.ruta,
.recorrido div.horario,
.recorrido div.disponibilidad,
.recorrido div.prox_parada,
.parada div.nombre_parada,
.parada div.title_rutas,
.parada div.horarios,
.parada div.title_horarios,
.parada div.horario {
    background-color: #000;
    color: #fff;
}

.recorrido div.horario .recorrido_text {
    text-transform: none;
    min-width: 200px;
}

.recorrido div.t_prox_parada {
    text-align: center;
}

.recorrido div.t_prox_parada span.recorrido_text {
    font-weight: 900;
}

.recorrido div.title_destino {
    background-color: #285999;
    color: #fff;
    text-align: center;
}

.recorrido div.destino {
    text-align: center;
}

.recorrido div.destino * {
    font-weight: bold !important;
}

.recorrido div.note {
    background-color: #999;
    color: #FFF;
    text-transform: none;
    margin-bottom: 0px;
    border-radius: 0 0 0.2em .2em;
    font-weight: normal;
}

.parada div.ruta {
    background-color: #727171;
    color: #fff;
    padding: 0 20px;
    cursor: pointer;
}

.parada div.ruta.active {
    background-color: #FAEC21;
    -webkit-box-shadow: inset 0px 0px 6px 0.05px rgba(0, 0, 0, 1);
    -moz-box-shadow: inset 0px 0px 6px 0.05px rgba(0, 0, 0, 1);
    box-shadow: inset 0px 0px 6px 0.05px rgba(0, 0, 0, 1);
    color: #000;
}

.parada div.title_horarios, .parada div.horarios, .parada div.horario, .parada div.submit {
    display: none;
}

.parada div.title_horarios {
    text-align: center;
    margin: 0 50px;
}

.parada div.horarios {
    padding-top: 8px;
    padding-bottom: 6px;
}

.parada div.horario {
    padding: 3px 8px;
}

.parada div.horario[data-bv="1"] {
    cursor: pointer;
}

.parada div.horario[style="display: block;"]:nth-child(odd) {
    border-bottom: 1px solid #FFF;
}
.parada div.horario[style="display: block;"]:only-child {
    border-bottom: 0;
}

.parada div.horario.active {
    background-color: #F9EF95;
    color: #000;
}

.parada div.hora_parada .parada_text {
    text-transform: uppercase;
}

.parada div.submit {
    text-align: center;
}

.parada div.submit > input {
    background-color: #FAEC21;
    padding: 5px 25px;
    text-transform: uppercase;
    font-weight: bold;
    -webkit-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}

.parada div.submit > input[disabled] {
    cursor: default;
    background-color: #ABABBA;
}

/**********************************************
                       Contenido alternativo
**********************************************/

#alternative_content {
    display: none;
}


/**********************************************
                       Mapa y elementos
**********************************************/

/*----------------------------------------------
                       CONTENEDOR MAPA
----------------------------------------------*/

#map {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

/*----------------------------------------------
                       BOTONES DE REFRESH Y FILTER
----------------------------------------------*/

#refresh, #rutasFilter {
    position: absolute;
    left: 10px;
    z-index: 4;
    background-color: #000000;
}

#refresh {
    bottom: 10px;
    height: 36px;
    width: 39px;
    padding: 5px;
    -webkit-border-radius: 13px;
    -moz-border-radius: 13px;
    border-radius: 13px;
}

#rutasFilter {
    top: 10px;
    height: auto;
    color: #FFF;
    padding: 4px 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

#refresh:hover, #rutasFilter:hover {
    background-color: #009793;
}

#rutasFilter.active {
    color: #FAEC21;
}

/*----------------------------------------------
                       MODAL DE REFRESH
----------------------------------------------*/

#refresh_modal {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
    z-index: 100;
}

/**********************************************
                        Clases
 **********************************************/

.tooltip{
    display: inline;
    position: relative;
}

.tooltip:hover:after{
    background: #333;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(tooltip-content);
    left: 0%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: auto;
}

.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 20%;
    position: absolute;
    z-index: 99;
}

.highlight {
    text-decoration: underline;
    color: #97FFFC;
}

/**********************************************
                        Media Queries
 **********************************************/

/*----------------------------------------------
                        NAV
----------------------------------------------*/

@media (max-width: 935px) {
    #navbar #nav div a {
        display: none;
    }

    #nav > div {
        padding: 0 5px 0 2px;
        width: 60px;
    }
}

@media (min-width: 936px) {
    #nav > div {
        padding: 0 20px 0 0;
        width: 180px;
    }
}

@media (max-width: 403px) {
    #navbar #nav {
        margin-left: 5px;
    }

    #nav > div {
        padding: 0;
        width: 58px;
    }

    #navbar #nav #localizame {
        width: 50px;
        margin-left: -8px;
    }
}

/*----------------------------------------------
                        NAV > PLANEO MI VIAJE
----------------------------------------------*/

@media (min-width: 472px) and (max-width: 935px) {
    #navbar #nav #planeomiviaje {
        width: 128px;
    }

    #navbar #nav #planeomiviaje a {
        display: inline-block;
    }
}

/*----------------------------------------------
                        MENUS
 ----------------------------------------------*/

@media (min-width: 1031px) {
    #planeomiviaje_menu {
        left: 530px;
    }
}

@media (min-width: 401px) and (max-width: 1030px) {
    #planeomiviaje_menu {
        right: 0;
    }
}

@media (max-width: 400px) {
    #planeomiviaje_menu {
        left: 0;
        right: 0;
    }
}

@media (max-width: 357px) {
    #steps_content #origen_viaje .content {
        height: 210px;
    }

    #steps_content #origen_viaje .content > div {
        display: block;
        width: 100%;
        height: 50%;
    }
}

/*@media (min-width: 556px) and (max-width: 729px), (min-width: 890px) {
        #menus #misreservas_menu, #menus #mapapopups_menu {
                position: absolute;
                top: 95px;
                right: 0px;
        }
}*/

@media (max-width: 555px) {
    #mibusandando_menu, #misreservas_menu, #mapapopups_menu{
        min-width: inherit;
        width: 100%;
        left: 0px;
    }

    #mapapopups_menu {
        border-left: 0;
        border-right: 0;
    }

    #menus #misreservas_menu {
        position: absolute;
        top: 155px;
        left: 0px;
        border: 0px;
    }

    #reservas_programadas table td:nth-of-type(4), #reservas_programadas table th:nth-of-type(4) {
        display: none;
    }

    #reservas_historial table td:nth-of-type(3), #reservas_historial table th:nth-of-type(3) {
        display: none;
    }
}

/*----------------------------------------------
                        MAPA Y CONTENIDO
 ----------------------------------------------*/

@media (max-width: 420px) {
    .nm_bubble_content {
        font-size: 0.8em !important;
    }

    #refresh {
        text-align: center;
        position: absolute;
        height: 34px;
        width: 36px;
        z-index: 4;
        background-color: #000000;
        padding: 0;
        border-radius: 13px;
    }
}